<template>
	<!-- vue content -->
	<view class="common-body bg-common" style="position: relative;">
		<!-- <image src="@/static/img/title_bg.jpg" class="match-width" style="" mode="widthFix">
		</image> -->
		<bodyCustom title="队站开放及站内公益培训">
			<view class="pd-lr25 ver pd-t20">
				<view class="bg-white corner20">
					<image :src="detail.gateUrl" style="height: 200rpx;" class="corner20-t match-width" mode="widthFix">
					</image>

					<view class="pd-lr25 mg-t-10">
						<view class="line2 flex1 uni-bold font16 mg-t-10" style="line-height: 1;">
							{{detail.stationName}}
						</view>
						<view class="font-text-color-main_body mg-t-20 hor ver-center" style="">
							<view>队站电话：</view>
							<span class="mg-l-10">{{detail.stationPhone}}</span>
						</view>
						<view class="line2 font-text-color-main_body  " style="">
							<image src="../../static/img/ic_location.png" style="height: 25rpx;width: 25rpx;">
							</image>
							<span class="mg-l-10">{{detail.stationAddress}}</span>
						</view>
					</view>
				</view>

				<view class="hor mg-t-40">
					<view class="font16 font-text-color-explain">参观信息</view>
				</view>
				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20">
					<view class="hor ver-center">
						<view class="font-text-color-explain font16" style="width: 300rpx;">开始时间</view>
						<view class="font16 font-text-color-black line1">{{detail.showTime}}</view>
					</view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-explain font16" style="width: 300rpx;">联系电话</view>
						<view class="font16 font-text-color-black line1">{{detail.linkPhone}}</view>
					</view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-explain font16" style="width: 300rpx;">本次最大接待人数</view>
						<view class="font16 font-text-color-black line1">{{detail.quantity+detail.extraQuantity}}人
						</view>
					</view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-explain font16" style="width: 300rpx;">本次剩余可预约人数</view>
						<view class="font16 font-color-main line1">
							{{detail.quantity+detail.extraQuantity-detail.orderQuantity}}人
						</view>
					</view>
				</view>
				<view class="hor mg-t-40">
					<view class="font16 font-text-color-explain">预约信息</view>
				</view>
				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20" v-if="detail.orderStatus==2">
					<view class="hor ver-center">
						<view class="font-text-color-black font16" style="width: 300rpx;">预约人名</view>
						<input class="font16 font-text-color-black line1" v-model="applyName" placeholder="请输入预约人名"
							type="text"></input>
					</view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">联系电话</view>
						<input class="font16 font-text-color-black line1" v-model="phone" placeholder="请输入电话"
							type="number"></input>
					</view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">参观人数</view>
						<input class="font16 font-text-color-black line1" v-model="orderQuantity" type="number"
							placeholder="请输入参观人数"></input>
					</view>
				</view>

				<view class="mg-t-40 hor hor-center" style="">
					<view style="" class="pd-tb15 bg-gray-dark font-color-white text-center corner10 match-width"
						v-if="detail.orderStatus==1">已预约</view>
					<view style="" class="pd-tb15 bg-main font-color-white text-center corner10 match-width"
						v-if="detail.orderStatus==2" @click="showOrder=true">提交预约</view>
					<view style="" class="pd-tb15 bg-gray-dark font-color-white text-center corner10 match-width"
						v-if="detail.orderStatus==3">已约满</view>
					<view style="" class="pd-tb15 bg-gray-dark font-color-white text-center corner10 match-width"
						v-if="detail.orderStatus==4">已结束</view>
				</view>
				<view style="height: 10vh;"></view>
			</view>

		</bodyCustom>

		<u-popup v-model="showOrder" mode="bottom" border-radius="14">
			<view class="ver pd-lr20 pd-tb50 ver-center">
				<image src="../../static/img/gzh_qrcode.jpg" style="width: 60vw;height: 60vw;"
					show-menu-by-longpress="true"></image>
				<view>请先长按关注公众号，以便及时接收通知</view>
				<view style="width: 400rpx;" class="pd-tb15 bg-main font-color-white text-center corner100 mg-t-40"
					@click="onClickYuYue()">我已关注确认预约</view>
			</view>
		</u-popup>

		<view style="height: 75rpx;"></view>
	</view>


</template>
<script>
	import Vue from 'vue'

	let _this
	export default {
		data() {
			return {
				authUser: null,
				lessonOrderId: "",
				detail: {},

				showOrder: false,

				applyName: "",
				phone: "",
				orderQuantity: "",
			};
		},
		onReady: function() {
			var _this = this

		},
		onShow() { //页面恢复展示时

		},
		onLoad(option) { ////页面加载时
			_this = this
			this.initUser(option, this, true);
			this.lessonOrderId = option.lessonOrderId
			// let str = option.detail
			// if (str != null)
			// 	this.detail = JSON.parse(str)

			if (this.lessonOrderId == null) {
				uni.redirectTo({
					url: "/pages/lesson/lessonOrder"
				})
			}
			this.getData()
		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		methods: {
			getData() {
				_this.sendRequest({
					url: "lessonOrder/getLessonFromWx",
					data: {
						lessonOrderId: this.lessonOrderId
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.detail = res.data
					},
					codeFail: function(e) {},
					fail: function(e) {}
				})
			},
			requestSub() {
				uni.requestSubscribeMessage({
					tmplIds: ['eehBr0bbd7nnLfUFWeKpa6e87Cj50ygw3zgObVKTlPQ',
						'19ORxXNYLqJ7fDc4FWG33ScuqUmpLTkz5CYoPc2ilhU'
					],
					success(res) {


					}
				})
			},
			onClickYuYue() {
				if (!this.initUser(null, this, true)) {
					return
				}
				if (this.isEmpty(this.applyName)) {
					uni.showToast({
						title: "请输入预约人的姓名",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}
				if (this.isEmpty(this.phone)) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}

				if (this.isEmpty(this.orderQuantity)) {
					uni.showToast({
						title: "请输入最大参与人数",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}

				if (_this.platform == 4) {
					_this.requestSub()
				}
				uni.showModal({
					title: '提示',
					content: "是否确认预约地址为：" + _this.detail.stationName + "(" + _this.detail.stationAddress + ")",
					confirmText: "预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "orderRecord/wxOrder",
								data: {
									openId: uni.getStorageSync('openid'),
									lessonOrderId: _this.detail.lessonOrderId,
									orderQuantity: _this.orderQuantity,
									applyName: _this.applyName,
									phone: _this.phone
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "预约成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											// _this.getData()
											uni.navigateBack()
										}
									});
									_this.showOrder = false
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickRecord() {
				uni.reLaunch({
					url: "/pages/tabbar/my"
				})
			},
			onImageError() {
				console.log("errere")
				this.detail.teacherPhoto = '../../static/img/default_avatar.jpg'
			},
			onClickGuide() {
				const latitude = _this.detail.latitude;
				const longitude = _this.detail.longitude;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: _this.detail.lessonName,
					address: _this.detail.trainAddress,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	};
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}
</style>